<template>
	<view class="message-container">
		<!-- 标签页切换 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === 'chat' }" @click="switchTab('chat')">
				<text>会话</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'notification' }" @click="switchTab('notification')">
				<text>通知</text>
			</view>
		</view>

		<!-- 会话列表 -->
		<view class="chat-list" v-if="activeTab === 'chat'">
			<!-- 搜索栏 -->
			<view class="search-bar">
				<view class="search-input">
					<text class="search-icon">🔍</text>
					<text class="placeholder">搜索消息</text>
				</view>
			</view>

			<!-- 会话项 -->
			<view class="chat-item" v-for="(chat, index) in filteredChats" :key="index" @click="goToChat(chat.id)">
				<!-- 头像 -->
				<view class="avatar-wrapper">
					<image :src="chat.avatar" mode="aspectFill" class="avatar"></image>
					<view class="badge" v-if="chat.unread > 0">
						<text>{{ chat.unread > 99 ? '99+' : chat.unread }}</text>
					</view>
				</view>

				<!-- 消息内容 -->
				<view class="chat-content">
					<view class="chat-header">
						<text class="chat-name">{{ chat.name }}</text>
						<text class="chat-time">{{ chat.time }}</text>
					</view>
					<view class="chat-message">
						<text class="message-text">{{ chat.lastMessage }}</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="filteredChats.length === 0">
				<text class="empty-icon">💬</text>
				<text class="empty-text">暂无消息</text>
			</view>
		</view>

		<!-- 通知列表 -->
		<view class="notification-list" v-if="activeTab === 'notification'">
			<!-- 通知分类 -->
			<view class="notification-category">
				<text class="category-title">系统通知</text>
			</view>

			<!-- 系统通知项 -->
			<view class="notification-item" v-for="(systemNotice, index) in systemNotices" :key="index">
				<view class="notice-icon">
					<text class="icon-emoji">📢</text>
				</view>
				<view class="notice-content">
					<view class="notice-header">
						<text class="notice-title">{{ systemNotice.title }}</text>
						<text class="notice-time">{{ systemNotice.time }}</text>
					</view>
					<text class="notice-text">{{ systemNotice.content }}</text>
				</view>
				<view class="notice-dot" v-if="!systemNotice.read"></view>
			</view>

			<!-- 通知分类 -->
			<view class="notification-category">
				<text class="category-title">互动通知</text>
			</view>

			<!-- 互动通知项 -->
			<view class="notification-item" v-for="(interactionNotice, index) in interactionNotices" :key="index">
				<image :src="interactionNotice.avatar" mode="aspectFill" class="notice-avatar"></image>
				<view class="notice-content">
					<view class="notice-header">
						<text class="notice-title">{{ interactionNotice.title }}</text>
						<text class="notice-time">{{ interactionNotice.time }}</text>
					</view>
					<text class="notice-text">{{ interactionNotice.content }}</text>
				</view>
				<view class="notice-dot" v-if="!interactionNotice.read"></view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="systemNotices.length === 0 && interactionNotices.length === 0">
				<text class="empty-icon">🔔</text>
				<text class="empty-text">暂无通知</text>
			</view>
		</view>
		
		<!-- 底部tabbar -->
		<view class="tabbar">
			<BottomTabbar theme="light" :value="3" :color="'#892FE8'" />
		</view>
	</view>
</template>

<script setup>
	import { onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app"
	import {
		ref,
		computed,
		onMounted
	} from 'vue';

	// 标签页状态
	const activeTab = ref('chat');
	const searchQuery = ref('');

	// 会话数据
	const chats = ref([{
			id: 1,
			name: '摄影爱好者群聊',
			avatar: '/static/avatar/1.jpg',
			lastMessage: '周末去香山拍照，有人一起吗？',
			time: '10:25',
			unread: 3,
			type: 'group'
		},
		{
			id: 2,
			name: '张三',
			avatar: '/static/avatar/2.jpg',
			lastMessage: '你好，关于上次活动的照片能发给我吗？',
			time: '昨天',
			unread: 1,
			type: 'single'
		},
		{
			id: 3,
			name: '城市马拉松小组',
			avatar: '/static/avatar/3.jpg',
			lastMessage: '下周训练计划已更新，请查看群文件',
			time: '昨天',
			unread: 0,
			type: 'group'
		},
		{
			id: 4,
			name: '李四',
			avatar: '/static/avatar/4.jpg',
			lastMessage: '谢谢分享，很有用的信息！',
			time: '周三',
			unread: 0,
			type: 'single'
		},
		{
			id: 5,
			name: '编程技术交流群',
			avatar: '/static/avatar/5.jpg',
			lastMessage: '推荐一个很好的学习资源',
			time: '周一',
			unread: 0,
			type: 'group'
		}
	]);

	// 系统通知数据
	const systemNotices = ref([{
			id: 1,
			title: '系统更新通知',
			content: '应用已更新至最新版本，新增了兴趣小组功能',
			time: '今天 08:30',
			read: false
		},
		{
			id: 2,
			title: '活动提醒',
			content: '您报名的"周末户外徒步"活动将在明天开始',
			time: '昨天 18:45',
			read: false
		}
	]);

	// 互动通知数据
	const interactionNotices = ref([{
			id: 1,
			avatar: '/static/avatar/2.jpg',
			title: '王五回复了你的话题',
			content: '赞同你的观点，我也觉得这个方法很有效！',
			time: '10:15',
			read: false
		},
		{
			id: 2,
			avatar: '/static/avatar/3.jpg',
			title: '赵六关注了你',
			content: '',
			time: '昨天 14:20',
			read: true
		},
		{
			id: 3,
			avatar: '/static/avatar/4.jpg',
			title: '多人赞了你的动态',
			content: '张三、李四等5人赞了你的分享',
			time: '周三 09:10',
			read: true
		}
	]);

	// 计算过滤后的会话列表
	const filteredChats = computed(() => {
		if (!searchQuery.value) {
			return chats.value;
		}
		return chats.value.filter(chat =>
			chat.name.includes(searchQuery.value) ||
			chat.lastMessage.includes(searchQuery.value)
		);
	});

	// 切换标签页
	const switchTab = (tab) => {
		activeTab.value = tab;
	};

	// 跳转到聊天详情页
	const goToChat = (id) => {
		// 标记消息为已读
		const chat = chats.value.find(item => item.id === id);
		if (chat) {
			chat.unread = 0;
		}

		uni.navigateTo({
			url: `/pages_my/chat?id=${id}&title=${encodeURIComponent(chat?.name || '')}`
		});
	};

	// 页面挂载
	onMounted(() => {
		console.log('消息页面已加载');
	});
	
	onPullDownRefresh(() => {
		console.log("下拉刷新")
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log("上拉加载更多")
	})
</script>

<style scoped lang="scss">
	/* 全局变量 */
	$primary-color: #7C3AED;
	$bg-color: #f3f4f6;
	$white: #ffffff;
	$text-primary: #1F2937;
	$text-secondary: #6B7280;
	$border-color: #E5E7EB;

	.message-container {
		background-color: $bg-color;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 标签页切换 */
	.tab-bar {
		display: flex;
		background-color: $white;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 28rpx 0;
		position: relative;

		&:active {
			background-color: rgba($primary-color, 0.05);
		}
	}

	.tab-item.active text {
		color: $primary-color;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 6rpx;
		background-color: $primary-color;
		border-radius: 3rpx;
	}

	/* 搜索栏 */
	.search-bar {
		padding: 20rpx 30rpx;
		background-color: $white;
	}

	.search-input {
		display: flex;
		align-items: center;
		background-color: $bg-color;
		border-radius: 36rpx;
		padding: 20rpx 30rpx;
	}

	.search-icon {
		font-size: 28rpx;
		color: #9CA3AF;
		margin-right: 10rpx;
	}

	.placeholder {
		margin-left: 10rpx;
		color: #9CA3AF;
		font-size: 28rpx;
	}

	/* 会话列表 */
	.chat-list {
		padding-bottom: 180rpx;
		// 增加底部内边距避免被tabBar遮挡，特别是在安卓设备上
	}

	.chat-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		background-color: $white;
		border-bottom: 1rpx solid $border-color;

		&:active {
			background-color: rgba($primary-color, 0.03);
		}
	}

	.avatar-wrapper {
		position: relative;
		margin-right: 24rpx;
	}

	.avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 16rpx;
	}

	.badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background-color: #EF4444;
		color: $white;
		font-size: 24rpx;
		min-width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10rpx;
	}

	.chat-content {
		flex: 1;
	}

	.chat-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.chat-name {
		font-size: 32rpx;
		font-weight: 500;
		color: $text-primary;
	}

	.chat-time {
		font-size: 24rpx;
		color: $text-secondary;
	}

	.chat-message {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.message-text {
		font-size: 28rpx;
		color: $text-secondary;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 通知列表 */
	.notification-list {
		padding-bottom: 180rpx;
		// 增加底部内边距避免被tabBar遮挡，特别是在安卓设备上
	}

	.notification-category {
		padding: 20rpx 30rpx;
		background-color: $bg-color;
	}

	.category-title {
		font-size: 28rpx;
		font-weight: 500;
		color: $text-secondary;
	}

	.notification-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		background-color: $white;
		border-bottom: 1rpx solid $border-color;
	}

	.notice-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		background-color: rgba($primary-color, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
	}

	.notice-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		margin-right: 24rpx;
	}

	.notice-content {
		flex: 1;
	}

	.notice-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.notice-title {
		font-size: 30rpx;
		font-weight: 500;
		color: $text-primary;
	}

	.notice-time {
		font-size: 24rpx;
		color: $text-secondary;
	}

	.notice-text {
		font-size: 28rpx;
		color: $text-secondary;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.notice-dot {
		width: 16rpx;
		height: 16rpx;
		background-color: #EF4444;
		border-radius: 50%;
		margin-left: 20rpx;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
	}

	.empty-text {
		margin-top: 30rpx;
		color: #9CA3AF;
		font-size: 32rpx;
	}

	.empty-icon {
		font-size: 120rpx;
		color: #D1D5DB;
	}

	.icon-emoji {
		font-size: 40rpx;
		color: #7C3AED;
	}

	/* 响应式适配 */
	@media screen and (min-width: 768px) {
		.message-container {
			max-width: 750rpx;
			margin: 0 auto;
		}
	}
</style>